// 流程步骤组件
<template>
  <div id="stepX">
    <el-steps
      :active="this.configs.active"
      finish-status="success"
      align-center
      :process-status="this.configs.processstatus"
    >
      <el-step
        :title="item.flow_node_name"
        :description="item.description"
        v-for="item in this.configs.data"
        :key="item.flow_node_name"
      ></el-step>
    </el-steps>
    <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
  </div>
</template>

<script>
export default {
  name: "stepX",

  props: {
    configs: {
      type: Object,
      default() {
        return {
          active: 0,
          processstatus: "process",
          data: {
            flow_node_name: "",
            // flow_node_id: "",
            description: ""
          }
        };
      }
    }
  },
  data: function() {
    return {};
  },
  methods: {
    next() {
      if (this.configs.active++ > this.configs.data.length)
        this.configs.active = 0;
    }
  },
  created() {},
  computed: {
    // realstep() {
    //   let realstep = 0;
    //   this.configs.data.forEach((item, index) => {
    //     if (this.configs.active === item.flow_node_id) {
    //       realstep = index + 1;
    //       return;
    //     }
    //   });
    //   this.$emit("stepChange", realstep);
    //   return realstep;
    // }
  }
};
</script>

<style lang="less">
</style>